<template>
  <div class="box" @click="add"></div>
</template>
<script>
export default {
  name: 'myBox',
  data() {
    return {
      a: 1,
      b: 2
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
    },
    async m1() {
      const res = await this.m1_1()
      console.log(res)
      return res
    },
    m1_1() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(`m1_1`)
        }, 2e3)
      })
    },
    async m2() {
      const res = await this.m2_1()
      console.log(res)
      return res
    },
    m2_1() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(`m2_1`)
        }, 1e3)
      })
    }
  },
  async mounted() {
    await this.m1()
    this.m2()
    console.log(`helloworld`)
    //1:1
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
